<template>
	<view class="content">
		<view class="headerBox">
			<my-header @instruct="handinstruct" :instruct="instruct" :title="parentTitle" />
		</view>
		<scroll-view :scroll-y="true" class="ScrollView">
			<view class="swiperBox">
				<up-swiper :list="Commodity.commonFileDtos" :displayMultipleItems='0' indicator indicatorMode="line"
					circular></up-swiper>
			</view>
			<view class="detailBox">
				<view class="detail-text">
					<view class="pirce-kucun">
						<view class="pirce-kucun-left">
							<span class="span1">￥{{Commodity.commodityPrice}}</span>
							<span class="span2"> /件</span>
						</view>
						<view class="pirce-kucun-right">
							库存:{{inventory}}
						</view>
					</view>
					<view class="commodity-title">
						{{Commodity.cname}}
					</view>
					<view class="commodity-subtitle" v-if="Commodity.forShort">
						{{Commodity.forShort}}
					</view>
				</view>
				<view class="SelectStudent">
					<view class="title">
						<view class="">
							需选一位学生
						</view>
						<view class="btnbox">
							<up-button @click="addstudent" size="small" type="default" text="新增
							"></up-button>
						</view>

					</view>
					<scroll-view scroll-x="true" class="scroll-view_x">
						<view class="student-item" @click="stactive(item,index)"
							:class="[studentactie == index ? 'student-active' : '']"
							v-for="(item,index) in studentdata.value" :key="index">
							<view class="Name">
								{{item.sname}}
							</view>
							<view class="detailclass">
								{{item.className}}
							</view>
							<image v-if="studentactie == index" class="selectedimg"
								:src="proxy.serverimageUrl + 'ProductDetails/Selected.png'" mode=""></image>
						</view>
					</scroll-view>

					<view class="student-detail" v-if="studentdetail.sname">
						<view class="left-box">
							<p class="name-text">{{studentdetail.sname}}</p>
							<p class="p2">
								<span>{{studentdetail.birthday}}</span>
								&nbsp;&nbsp;
								<span>{{studentdetail.sex == 1 ? '男' : '女'}}</span>
								&nbsp;&nbsp;
								<span>{{studentdetail.park}}</span>
							</p>
							<p class="p2">
								身高体重：{{studentdetail.height}}cm、{{studentdetail.weight}}斤
							</p>
						</view>
						<view class="kong-line">

						</view>
						<image @click="editstudent" :src="proxy.serverimageUrl + 'AddressManagement/edit.png'" mode="">
						</image>
					</view>
					<!-- 空盒子样式  横线 -->
					<view class="line">

					</view>
					<view class="sizeBox"
						v-if="Commodity.specificationsSizes && Commodity.specificationsSizes.length > 0">
						<view class="sizeBox-left">
							尺码
						</view>
						<view class="sizeBox-right">
							<view class="textbox">
								<span class="span1">已选 </span>
								<span class="span2"> {{sizenum}}</span>
							</view>
							<!-- <image src="../../static/ProductDetails/rightarrow.png" mode=""></image> -->
						</view>

					</view>
					<scroll-view class="siezbtnBox"
						v-if="Commodity.specificationsSizes && Commodity.specificationsSizes.length > 0"
						:scroll-into-view="toView" scroll-x="true">
						<view class="btn" :id="'g' + item.gid"
							:class="[studentimg == item.gid && studentp == 0 ? 'btnactive' : sizebtnindex ==index && (studentp == 1 || studentp == 3) ? 'btnactive-y' : sizebtnindex == index && (studentp == 2 || studentp == 4) ? 'btnactive-r':sizebtnindex == index && studentp == 5 ? 'btnactive':'' ]"
							@click="changesize(item,index)" v-for="(item,index) in Commodity.specificationsSizes"
							:key="item.gid">
							{{item.specificationsSize}}
							<image v-if="studentimg == item.gid && studentp == 0" class="recomimg"
								:src="proxy.serverimageUrl + 'ProductDetails/recommend.png'" mode=""></image>
							<image v-if="studentimg == item.gid && studentp != 0 && studentp != 5" class="recomimg"
								:src="proxy.serverimageUrl + 'ProductDetails/recommeneds.png'" mode=""></image>

						</view>
					</scroll-view>
					<view class="" v-if="Commodity.specificationsSizes && Commodity.specificationsSizes.length > 0">
						<p class="sizetext" v-if="studentp == 0">推荐尺码是根据身高体重计算得来</p>
						<p class="sizetext" v-if="studentp == 1">根据计算，该尺码可能<span style="color:#DEB34A">偏小</span>了</p>
						<p class="sizetext" v-if="studentp == 2">根据计算，该尺码可能<span style="color:#FE4647">太小</span>了</p>
						<p class="sizetext" v-if="studentp == 3">根据计算，该尺码可能<span style="color:#DEB34A">偏大</span>了</p>
						<p class="sizetext" v-if="studentp == 4">根据计算，该尺码可能<span style="color:#FE4647">太大</span>了</p>
						<p class="sizetext" v-if="studentp == 5">暂无推荐尺码</p>
					</view>

				</view>
				<view class="commoditydetailBox">
					<p class="title-p">商品详情</p>
					<!-- 空盒子样式  横线 -->
					<view class="line">

					</view>
					<!-- <image :src="proxy.serverimageUrl + 'ProductDetails/sizeimg.png'" mode=""></image> -->
					<view class="detailBody">
						<image class="imageitem" @click="clickImg(Commodity.describeDtos)"
							v-for="(item,index) in Commodity.describeDtos" :key="index" :src="item.url" mode=""></image>
					</view>
				</view>
			</view>
			<view class="kongBox" style="height: 20rpx; width: 100%;">

			</view>
		</scroll-view>
		<view class="bottomBox">
			<button class="wxbtn" open-type="contact">
				<view class="customerservice">
					<image :src="proxy.serverimageUrl+'ProductDetails/customerservice.png'" mode=""></image>
					<p class="custm-p">客服</p>
				</view>
			</button>
			<view @click="gocar" class="customer-car">
				<image style="width: 48rpx; height: 46rpx;" src="../../static/car.png" mode=""></image>
				<p class="custm-p">购物车</p>
			</view>
			<button type="default" class="btn1" hover-class="btn1is-hover" @click="addcar">加入购物车</button>
			<button type="default" class="btn" hover-class="is-hover" @click="buynow">立即购买</button>
		</view>
		<up-popup :round="20" mode="bottom" :show="show" @close="close">
			<view class="popcontent">
				<view class="popheader">
					<p class="pop-title">{{poptitle}}</p>
					<image @click="popshow" :src="proxy.serverimageUrl + 'ProductDetails/close.png'" mode=""></image>
				</view>
				<view class="studentform">
					<view class="formdata">
						<view class="databox-left">
							学生姓名
						</view>
						<view class="databox-right">
							<up-input placeholder="请输入内容" border="surround" v-model="formdata.sname"
								@change="change"></up-input>
						</view>
					</view>
					<view class="formdata" @click="dateshow('simple')">
						<view class="databox-left">
							生日
						</view>
						<view class="databox-right" style="height: 72rpx;">
							{{formdata.birthday}}
						</view>
					</view>
					<view class="formdata">
						<view class="databox-left">
							性别
						</view>
						<view class="databox-right">
							<up-radio-group v-model="radiovalue1" placement="row">
								<up-radio activeColor="#013CAA" :customStyle="{marginBottom: '8px'}"
									v-for="(item, index) in radiolist1" :key="index" :label="item.name"
									:name="item.value" @change="radioChange">
								</up-radio>
							</up-radio-group>
						</view>

					</view>
					<view class="formdata">
						<view class="databox-left">
							分园区
						</view>
						<view class="databox-right" style="height: 72rpx;">
							<uni-data-select style="width: 100%;" v-model="formdata.park" :localdata="pickercolumns"
								@change="parkchange"></uni-data-select>
							<!-- {{formdata.park}} -->
						</view>
						<!-- 						<up-picker :show="pickershow" :columns="pickercolumns" @cancel="pickercancel" @confirm="pickerconfirm" :keyName="pickerkeyName"></up-picker> -->

					</view>
					<view class="formdata">
						<view class="databox-left">
							班级
						</view>
						<view class="databox-right" style="height: 72rpx;">
							<uni-data-select style="width: 100%;" v-model="formdata.className" :localdata="columns"
								@change="classNamechange"></uni-data-select>
							<!-- {{formdata.className}} -->
						</view>
					</view>
					<view class="formdata">
						<view class="databox-left">
							身高
						</view>
						<view class="databox-right">
							<up-input placeholder="请输入内容" border="surround" v-model="formdata.height"
								@change="change"></up-input>
						</view>
					</view>
					<view class="formdata">
						<view class="databox-left">
							体重
						</view>
						<view class="databox-right">
							<up-input placeholder="请输入内容/斤" border="surround" v-model="formdata.weight"
								@change="change"></up-input>
						</view>
					</view>
				</view>
				<up-button type="primary" @click="addstudentdata" :text="popbtntitle"></up-button>
			</view>
		</up-popup>
		<next-date-picker themeColor="#013CAA" ref="nextDatePickerRef" :mode="mode" :isAbleSelectFutureDate="false"
			:defaultDate="dateModel" @finishSelectDate="finishSelectDate" :defaultCheckedList="[]">
		</next-date-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue';
	import {
		useStore
	} from 'vuex'
	import {
		queryCommodityByCid,
		queryStudentByOpenid,
		saveStudent,
		queryStudentBySid,
		modifyStudent,
		saveShoppingCart
	} from '@/utils/api.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	/*上个页面传过来的cid*/
	const Commodityid = ref('')
	const cid = ref('')
	const sid = ref('')
	sid.value = uni.getStorageSync('sid')
	const openid = ref('')
	openid.value = uni.getStorageSync('openid')
	/*单个尺码库存*/
	const inventory = ref(0)
	/*分园区选择的数据*/
	const pickercolumns = ref([])
	const columns = ref([])
	onLoad((o) => {
		if (o.cid) {
			cid.value = o.cid
			getCommoditydetail(o.cid)
			Commodityid.value = o.cid
		}
	})
	/*选择框点击事件*/
	const parkchange = (e) => {
		pickercolumns.value.map(item => {
			if (item.pName === e) {
				columns.value = item.classEntities
				columns.value.map(item => {
					item.text = item.className
					item.value = item.className
				})
			}
		})

	}
	/*跳转购物车*/
	const gocar = () =>{
		uni.switchTab({
			url:'/pages/Car/index'
		})
	}
	const classNamechange = (e) => {
		if (formdata.value.park == '') {
			uni.showToast({
				title: '请先选择分园区',
				icon: 'error',
				duration: 1000
			})
			return
		}
		console.log(e);
	}
	/*选择框确定事件*/
	const pickerconfirm = (e) => {
		console.log();
	}

	/*选择框取消事件*/
	const pickercancel = () => {
		pickershow.value = false
	}
	/*学生信息表单*/
	const formdata = ref({
		sname: '',
		className: '',
		height: '',
		weight: '',
		sex: '',
		openid: uni.getStorageSync('openid'),
		birthday: '',
		park: '',
		sid: sid.value
	})
	/*选择生日弹窗*/
	const mode = ref('simple');
	const nextDatePickerRef = ref();
	const dateshow = (showType) => {
		mode.value = showType;
		nextDatePickerRef.value.open();
	}
	const finishSelectDate = (e) => {
		formdata.value.birthday = e[0]
	}
	const dateModel = ref()
	/*点击图片放大*/
	const clickImg = (itemlist) => {
		let arr = []
		itemlist.map(item => {
			arr.push(item.url)
		})
		uni.previewImage({
			urls: arr, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
			current: '', // 当前显示图片的http链接，默认是第一个
			success: function(res) {},
			fail: function(res) {},
			complete: function(res) {},
		})
	}
	/*加入购物车*/
	const addcar = () => {
		addCart()
	}
	/*立即购买*/
	const buynow = () => {
		if (inventory.value == 0) {
			uni.showToast({
				title: '商品库存不足',
				duration: 1000,
				icon: 'error'
			})
		} else {
			if (studentobj.value.stid) {
				let obj = {
					cid: Commodityid.value,
					stid: studentobj.value.stid,
					specificationsSize: sizenum.value
				}
				let a = JSON.stringify(obj)
				uni.setStorageSync('orderbuy', a)
				uni.navigateTo({
					url: '/subpages/Ordersettlement/index?orderbuy=' + a
				})
			} else {
				uni.showToast({
					title: '请添加学生信息',
					icon: 'error',
					duration: 1500
				})
			}
		}
	}
	/*添加进购物车方法*/
	const addCart = () => {
		if (inventory.value == 0) {
			uni.showToast({
				title: '商品库存不足',
				duration: 1000,
				icon: 'error'
			})

		} else {
			if (studentobj.value.stid) {
				let params = {
					number: 1,
					openId: uni.getStorageSync('openid'),
					stid: studentobj.value.stid,
					specificationsSize: sizenum.value,
					cid: Commodityid.value
				}
				saveShoppingCart(params).then(res => {
					if (res.code == 200) {
						setTimeout(() => {
							uni.showToast({
								title: '添加购物车成功',
								duration: 1000,
								icon: 'success'
							})
							setTimeout(() => {
								uni.hideToast();
							}, 1000)
						}, 0)
					}

				})
			} else {
				uni.showToast({
					title: '请添加学生信息',
					icon: 'error',
					duration: 1500
				})
			}
		}


	}
	/*弹窗标题和btn按钮文字*/
	const poptitle = ref('')
	const popbtntitle = ref('')
	/*用于头部组件返回事件*/
	const instruct = ref('back')
	const handinstruct = (instruct) => {
		switch (instruct) {
			// 返回
			case 'back':
				uni.switchTab({
					url: '/pages/Home/index'
				})
				break;
		}
	}
	/*获取学生数据*/
	const studentdata = reactive([])
	const querystudent = () => {
		pickercolumns.value = []
		let params = {
			openid: uni.getStorageSync('openid'),
			sid: uni.getStorageSync('sid')
		}
		queryStudentByOpenid(params).then(res => {
			if (res.code == 200) {
				if (res.data.studentEntities.length > 0) {
					studentdata.value = res.data.studentEntities
					studentdetail.value = res.data.studentEntities[0]
					studentobj.value = res.data.studentEntities[0]
					heianwienum(res.data.studentEntities[0])
				}
				res.data.parkDtos.map(item => {
					pickercolumns.value.push({
						text: item.pName,
						value: item.pName,
						...item
					})
				})
				// pickercolumns.value = res.data.parkDtos
				// pickercolumns.push( res.data.parkDtos)
				console.log(pickercolumns);
			}

		})
	}
	/*请求商品详情接口*/
	const Commodity = ref({})
	/*获取尺码数据*/
	const sizenumdata = ref([])
	/*商品详情数据*/
	const getCommoditydetail = (cid) => {
		let params = {
			cid: cid
		}
		queryCommodityByCid(params).then(res => {
			if (res.code == 200) {
				Commodity.value = res.data
				if (res.data.specificationsSizes.length > 0) {
					sizenumdata.value = res.data.specificationsSizes
					sizenum.value = res.data.specificationsSizes[0].specificationsSize
					inventory.value = res.data.specificationsSizes[0].inventory
					changesize(res.data.specificationsSizes[0], 0)
				} else {
					inventory.value = res.data.commodityInventory
				}
				querystudent()
			}
		})
	}

	/*学生信息新增弹窗关闭事件*/
	const popshow = () => {
		close()
	}

	/*尺码弹窗关闭*/
	const sizeBoxclose = () => {
		sizeshow.value = false
	}
	/*input文本框的change事件*/
	const change = (e) => {
		// console.log(e); //获取文本框的对象的值
	}
	/*时间组件控制显示隐藏*/
	const calendarshow = ref(false)
	const calendarchange = () => {
		// calendarshow.value = true
	}
	/*时间组件close关闭事件*/
	const calenderclose = () => {
		calendarshow.value = false
	}
	/*时间组件确定事件*/
	const calenderconfirm = (e) => {
		formdata.value.birthday = e[0]
		calendarshow.value = false
	}
	/*性别单选*/
	const radiolist1 = reactive([{
			name: '男孩',
			value: 1,
			disabled: false,
		},
		{
			name: '女孩',
			value: 0,
			disabled: false,
		},
	])

	// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
	const radiovalue1 = ref('');
	/*单选框change事件*/
	const radioChange = (n) => {
		formdata.value.sex = n
	};
	const getshowtoast = (title) => {
		uni.showToast({
			title: title,
			duration: 1000,
			icon: 'error'
		})
	}
	/*点击确定按钮添加学生*/
	const addstudentdata = () => {
		if (!formdata.value.sname) {
			getshowtoast('请输入学生姓名')
			return
		} else if (!formdata.value.birthday) {
			getshowtoast('请选择学生生日')
			return
		} else if (formdata.value.sex != 0 && formdata.value.sex != 1) {
			getshowtoast('请选择学生性别')
			return
		} else if (!formdata.value.height) {
			getshowtoast('请输入学生身高')
			return
		} else if (!formdata.value.weight) {
			getshowtoast('请输入学生体重')
			return
		} else {
			if (formdata.value.stid) {
				editstu()
			} else {
				savestudentdata(formdata.value)
			}
		}

	}
	/*修改前查询学生信息的按钮方法*/
	const editstudent = () => {
		queryStudentBySid(studentdetail.value.stid).then(res => {
			if (res.code == 200) {
				formdata.value = res.data
				pickercolumns.value.map(item => {
					if (item.pName == res.data.park) {
						columns.value = item.classEntities
						columns.value.map(item => {
							item.text = item.className
							item.value = res.data.className
						})
					}
				})
				// formdata.value.className = res.data.className
				radiovalue1.value = res.data.sex
				poptitle.value = '修改学生'
				popbtntitle.value = '确认修改'
				show.value = true
				console.log(columns.value);
			}
		})
	}
	/*修改学生接口方法*/
	const editstu = () => {
		let params = {
			...formdata.value
		}
		modifyStudent(params).then(res => {
			getCommoditydetail(cid.value)
			heianwienum(params)
			close()

		})
	}
	/*添加学生接口方法*/
	const savestudentdata = (data) => {
		saveStudent(data).then(res => {
			if (res.code == 200) {
				getCommoditydetail(cid.value)
				heianwienum(data)
				close()
			}
		})
	}
	/*传给头部组件的title*/
	const parentTitle = ref('')
	/*定义选中的学生*/
	const studentactie = ref(0)
	/*用户弹框组件的显示和隐藏*/
	const show = ref(false);
	/*学生详细信息*/
	const studentdetail = ref({})
	/**选择学生后判断滑动到指定尺码*/
	const toviewnum = () => {
		sizenumdata.value.map(item => {
			if (studentimg.value == item.gid) {
				toView.value = 'g' + item.gid
			}
		})
	}
	/*选择尺码后按钮样式切换， 用于判断当前选择的按钮index*/
	const sizebtnindex = ref(null)
	/*点击选择尺码显示*/
	const sizenum = ref('')
	/*推荐尺码文字显示*/
	const studentp = ref('')
	/*单个学生信息*/
	const studentobj = ref({})
	/*推荐图片显示*/
	const studentimg = ref('')
	/*选择学生后定位到推荐尺码变量*/
	const toView = ref('')
	/*用于切换学生时样式的切换*/
	const stactive = (item, index) => {
		studentactie.value = index
		studentdetail.value = item
		studentobj.value = item
		console.log(item);
		heianwienum(item)
		setTimeout(() => {
			toviewnum()
		}, 100)
	}
	const sizeNum = ref(null)
	/*点击尺码事件*/
	const changesize = (item, index) => {
		sizenum.value = item.specificationsSize
		sizeNum.value = null
		sizebtnindex.value = index
		heianwienum(studentobj.value)
		let Sizearr1 = item.specificationsSize.split('#')
		inventory.value = item.inventory
		if (sizeNum.value) {
			let Sizearr2 = sizeNum.value.split('#')
			if (Sizearr2[0] - Sizearr1[0] == 10) {
				studentp.value = 1
			} else if (Sizearr2[0] - Sizearr1[0] >= 20) {
				studentp.value = 2
			} else if (Sizearr1[0] - Sizearr2[0] == 10) {
				studentp.value = 3
			} else if (Sizearr1[0] - Sizearr2[0] >= 10) {
				studentp.value = 4
			} else if (Sizearr2[0] == Sizearr1[0]) {
				studentp.value = 0
			} else {
				studentp.value = 5
			}
		} else {
			studentp.value = 5
			sizebtnindex.value = index
		}
	}
	/*计算身高体重推荐尺码方法*/
	const heianwienum = (item) => {
		let sdata = item
		sizenumdata.value.some(item => {
			if (sdata.height > item.startHeight && sdata.weight > item.startWeight && sdata.weight < item
				.endWeight && sdata.height < item.endHeight) {
				studentp.value = 0
				studentimg.value = item.gid
				//保存推荐的尺码
				sizeNum.value = item.specificationsSize
				//显示已选的尺码
				sizenum.value = item.specificationsSize
				return true
			} else {
				sizebtnindex.value = 0
				studentp.value = 5
			}
		})
		toviewnum()

	}
	/*新增学生弹框*/
	const addstudent = () => {
		show.value = true
		poptitle.value = '新增学生'
		popbtntitle.value = '确认添加'
		console.log(show.value);
	}
	/*学生弹框弹框关闭事件*/
	const close = () => {
		formdata.value = {
			sname: '',
			className: '',
			height: '',
			weight: '',
			sex: '',
			sid: uni.getStorageSync('sid'),
			openid: uni.getStorageSync('openid'),
			birthday: '',
			park: '',
		}
		radiovalue1.value = ''
		show.value = false
		columns.value = []
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-popup {
		z-index: 100001 !important;
	}

	::v-deep .uni-select {
		border: none;

		.uni-icons {
			display: none;
		}
	}

	.content {
		background-color: #F2F2F2;
		height: 100vh;
		padding-top: 195rpx;
		padding-bottom: 120rpx;
		position: relative;

		.headerBox {
			position: fixed;
			top: 0;
			z-index: 9999;
		}

		.ScrollView {
			height: calc(100vh - 260rpx);
			box-sizing: border-box;

			.swiperBox {
				width: 750rpx;
				height: 750rpx;

				::v-deep .u-swiper {
					width: 750rpx;
					height: 750rpx !important;

					.u-swiper__wrapper {
						width: 750rpx;
						height: 750rpx !important;

						.u-swiper__wrapper__item__wrapper__image {
							height: 750rpx !important;
						}
					}

					.u-swiper__indicator {
						bottom: 80rpx !important;
					}
				}

			}

			.detailBox {
				box-sizing: border-box;
				padding: 0 30rpx;
				position: relative;
				top: -55rpx;

				.detail-text {
					width: 690rpx;
					height: 280rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 59rpx 37rpx 51rpx 35rpx;

					.pirce-kucun {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.pirce-kucun-left {
							line-height: 34rpx;

							.span1 {
								font-family: MiSans;
								font-weight: bold;
								font-size: 52rpx;
								color: #013CAA;
							}

							.span2 {
								ont-family: Source Han Sans SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #BFBFBF;
							}
						}

						.pirce-kucun-right {
							font-family: Source Han Sans SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #BFBFBF;
						}
					}

					.commodity-title {
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 36rpx;
						color: #303030;
						margin-top: 40rpx;
						line-height: 40rpx;
					}

					.commodity-subtitle {
						margin-top: 25rpx;
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #636363;
						line-height: 40rpx;
					}
				}

				.SelectStudent {
					margin-top: 30rpx;
					width: 690rpx;
					// height: 335rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 36rpx;

					.title {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 28rpx;
						height: 40rpx;
						color: #303030;

						.btnbox {
							width: 150rpx;
						}
					}

					.scroll-view_x {
						width: 620rpx;
						height: 100rpx;
						margin-top: 30rpx;
						white-space: nowrap;

						.student-item {
							display: inline-block;
							width: 190rpx;
							height: 100rpx;
							margin-right: 20rpx;
							background: #F8F8F8;
							border-radius: 8rpx;
							border: 1rpx solid #EEEEEE;
							text-align: center;
							padding-top: 22rpx;
							position: relative;

							.Name {
								font-family: Source Han Sans SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #303030;
								line-height: 26rpx;
							}

							.detailclass {
								margin-top: 8rpx;
								font-family: Source Han Sans SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #989898;
								line-height: 24rpx;
							}

							.selectedimg {
								width: 43rpx;
								height: 42rpx;
								position: absolute;
								right: 0;
								bottom: 0;
							}
						}


						.student-active {
							background: #EDF3FF;
							border-radius: 8rpx;
							border: 1rpx solid #013CAA;
						}

					}



					.student-detail {
						margin-top: 26rpx;
						width: 100%;
						border-radius: 8rpx;
						padding: 35rpx;
						background-color: #F7F7F7;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left-box {
							.name-text {
								font-family: Source Han Sans SC;
								font-weight: 500;
								font-size: 30rpx;
								color: #303030;
								line-height: 30rpx;
							}

							.p2 {
								margin-top: 22rpx;
								font-family: Source Han Sans SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #989898;
								line-height: 24rpx;
							}
						}

						.kong-line {
							width: 1rpx;
							height: 45rpx;
							background: #DFDFDF;
						}

						image {
							width: 25rpx;
							height: 26rpx;
						}
					}

					.line {
						margin-top: 30rpx;
						width: 618rpx;
						height: 1rpx;
						background: #EEEEEE;
					}

					.sizeBox {
						margin-top: 36rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.sizeBox-left {
							font-family: Source Han Sans SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #303030;
							line-height: 40rpx;
						}

						.sizeBox-right {
							display: flex;
							align-items: center;

							.textbox {


								.span1 {
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 28rpx;
									color: #303030;
								}

								.span2 {
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 28rpx;
									color: #013CAA;
								}
							}

							image {
								margin-left: 25rpx;
								width: 13rpx;
								height: 24rpx;
							}
						}
					}





					.siezbtnBox {
						width: 620rpx;
						height: 100rpx;
						margin-top: 20rpx;
						white-space: nowrap;

						.btn {
							display: inline-block;
							width: 210rpx;
							height: 100rpx;
							// background: #F8F8F8;
							text-align: center;
							line-height: 100rpx;
							margin-right: 10rpx;
							border-radius: 8rpx;
							border: 1rpx solid #EEEEEE;
							position: relative;

							.recomimg {
								width: 70rpx;
								height: 32rpx;
								position: absolute;
								right: 0;
								top: 0;
							}
						}

						.btnactive {
							background: #EDF3FF;
							border-radius: 8rpx;
							border: 1rpx solid #013CAA;
						}

						.btnactive-y {
							background: #FFF9E6;
							border-radius: 8rpx;
							color: #DEB34A;
							border: 1rpx solid #F6CD61;
						}

						.btnactive-r {
							color: #FE3A3B;
							background: #FDEDED;
							border-radius: 8rpx;
							border: 1rpx solid #F45048;
						}
					}

					.sizetext {
						margin-top: 20rpx;
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #989898;
					}


				}

				.commoditydetailBox {
					margin-top: 30rpx;
					width: 690rpx;
					padding: 30rpx;
					background: #FFFFFF;
					border-radius: 20px;

					.title-p {
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #303030;
					}

					.line {
						width: 618rpx;
						height: 1px;
						margin-top: 36rpx;
						background: #EEEEEE;
					}

					.detailBody {
						.imageitem {
							max-width: 100%;
						}
					}

					// image {
					// 	margin-top: 30rpx;
					// 	width: 618rpx;
					// 	height: 319rpx;

					// }
				}
			}
		}

		.bottomBox {
			width: 100%;
			height: 120rpx;
			position: fixed;
			background: #FFFFFF;
			box-shadow: 0px 3px 32px 0px rgba(0, 0, 0, 0.17);
			bottom: 0;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.wxbtn {
				padding: 0;
				background: #ffffff;
				font-size: 28rpx;
				margin: 0;
				// width: 95%;
				text-align: left;
			}

			.wxbtn::after {
				border: none;
			}

			.customerservice {
				text-align: center;

				image {
					width: 48rpx;
					height: 46rpx;
				}

				.custm-p {
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #303030;
					margin-top: -16rpx;
					line-height: 22rpx;
				}

			}
			.customer-car{
				text-align: center;
				.custm-p {
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #303030;
					line-height: 22rpx;
				}
			}
			.btn1 {
				width: 240rpx;
				height: 92rpx;
				background: #303030;
				border-radius: 10rpx;
				color: #FFFFFF;
				margin: 0;
			}

			.btn {
				width: 240rpx;
				height: 92rpx;
				background: #013CAA;
				border-radius: 10rpx;
				color: #FFFFFF;
				margin: 0;
			}

			.btn1is-hover {
				color: rgba(255, 255, 255, 0.6);
				background: #303030;
				border-color: #303030;
			}

			.is-hover {
				color: rgba(255, 255, 255, 0.6);
				background: #013CAA;
				border-color: #013CAA;
			}
		}

		::v-deep .u-popup__content {
			padding: 40rpx 0;
			background: #F2F2F2;

			.popcontent {
				padding: 0 30rpx;

				.popheader {

					text-align: center;
					position: relative;

					.pop-title {
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 36rpx;
						color: #303030;
						line-height: 40px;
					}

					image {
						position: absolute;
						top: 4rpx;
						right: 30rpx;
						width: 36rpx;
						height: 36rpx;
					}
				}

				.studentform {
					width: 690rpx;
					margin-top: 47rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 40rpx 34rpx 20rpx;

					.formdata {
						display: flex;
						align-items: center;
						position: relative;
						margin-top: 40rpx;

						// .u-popup__content{
						// 	back
						// }
						/**/
						.databox-left {
							width: 140rpx;
							font-family: Source Han Sans SC;
							font-weight: 400;
							font-size: 32rpx;
							color: #303030;
							// line-height: 40rpx;
						}

						.u-input {
							border: none;
						}

						.databox-right {
							width: 380rpx;
							height: 72rpx;
							display: flex;
							align-items: center;

							.u-radio-group {
								margin-top: 14rpx;
								justify-content: space-between;
							}
						}
					}

					.formdata:first-child {
						margin-top: 0rpx;
					}

					.formdata::after {
						content: '';
						position: absolute;
						width: 100%;
						height: 2rpx;
						background: #EEEEEE;
						bottom: -15rpx;
					}

					.formdata:last-child::after {
						display: none;
					}
				}

				.u-button {
					margin-top: 30rpx;
					background: #013CAA;
					border: none;
				}
			}
		}

	}
</style>